const { ipcRenderer } = require('electron')
const { $, formatDuration } = require('./helper')

let musicAudio = new Audio() //播放器对象
let allTracks //所有音乐
let currentTrack //当前播放的音乐

window.addEventListener('DOMContentLoaded', () => {
  //点击添加音乐
  $('add-music-button').addEventListener('click', () => {
    ipcRenderer.send('add-music-window')
  })

  //音乐列表点击事件
  $('tracksList').addEventListener('click', event => {
    event.preventDefault()
    const { dataset, classList } = event.target
    const id = dataset && dataset.id
    
    if (id && classList.contains('fa-play')) {
      //播放音乐
      if (currentTrack && currentTrack.id == id) {
        //继续播放音乐
        musicAudio.play()
      } else {
        //播放新的歌曲，将之前的歌曲图标还原
        currentTrack = allTracks.find(track => track.id == id)
        musicAudio.src = currentTrack.path
        musicAudio.play()
        const resetIconEle = document.querySelector('.fa-pause')
        if (resetIconEle) {
          resetIconEle.classList.replace('fa-pause', 'fa-play')
        }
      }
      classList.replace('fa-play', 'fa-pause')
    } else if (id && classList.contains('fa-pause')) {
      //暂停音乐
      musicAudio.pause()
      classList.replace('fa-pause', 'fa-play')
    } else if (id && classList.contains('fa-trash-alt')) {
      //删除音乐
      musicAudio.pause()
      //发送删除事件
      ipcRenderer.send('delete-track', id)
    }
  })
})

//
ipcRenderer.on('getTracks', (event, arguments) => {
  allTracks = arguments
  renderListHtml(arguments)
})

//渲染播放器状态
musicAudio.addEventListener('loadedmetadata', () => {
  renderPlayerHtml(currentTrack.filename, musicAudio.duration)
})

//更新播放器状态
musicAudio.addEventListener('timeupdate', () => {
  updateProgressHtml(musicAudio.currentTime, musicAudio.duration)
})

//渲染播放列表
const renderListHtml = tracks => {
  const tracksList = $('tracksList')
  const tracksListHtmlStr = tracks.reduce((html, track) => {
    html += `<li class="music-track list-group-item d-flex justify-content-between align-items-center row">
            <div class="col-10">
                <i class="fas fa-music mr-2 text-secondary"></i>
                <b>${track.filename}</b>
            </div>
            <div class="col-2">
                <i class="fas fa-play mr-3" data-id="${track.id}"></i>
                <i class="fas fa-trash-alt" data-id="${track.id}"></i>
            </div>
        </li>`
    return html
  }, '')
  const emptyTracksHtml = `<div class="alert alert-primary">还没有添加任何音乐</div>`
  tracksList.innerHTML = tracks.length
    ? `<ul class="list-group">${tracksListHtmlStr}</ul>`
    : `<ul class="list-group">${emptyTracksHtml}</ul>`
}

//播放进度条
const updateProgressHtml = (currentTime, duration) => {
  const progress_bar = $('progress_bar')
  const player_seeker = $('player_seeker')
  let progress = Math.floor((currentTime / duration) * 100) + '%'
  progress_bar.style.width = progress
  progress_bar.innerHTML = progress
  player_seeker.innerHTML = formatDuration(currentTime)
}

//播放歌曲
const renderPlayerHtml = (name, duration) => {
  const player = $('player_status')
  duration = formatDuration(duration)
  const html = `<div class="col-10 font-weight-bold">
        正在播放:${name}
    </div>
    <div class="col-2">
        <span id="player_seeker">00:00</span>/${duration}
    </div>
</div>`
  player.innerHTML = html
}
